<template>
  <div class="message-system">
    <a-list item-layout="vertical" :data-source="msgList">
      <div v-if="showLoadingMore" slot="loadMore" class="loadMore tc">
        <a-spin v-if="loadingMore" />
        <c-button v-else type="link" @click="onLoadMore">
          加载更多
        </c-button>
      </div>
      <a-list-item slot="renderItem" slot-scope="item">
        <p class="head flex flex-align-c">
          <!-- <span class="avatar" :class="setIcon(item.type)"> -->
          <c-icon :type="setIcon(item.type)" size="16" class="info"></c-icon>
          <!-- </span> -->
          <span class="title">{{ item.title }}</span>
        </p>
        <div class="content">
          {{ item.message }}
        </div>
        <div class="foot flex-between flex-align-c">
          <span class="date">{{ $getTime(item.createDate) }}</span>
          <c-button
            type="link"
            @click="checkOrderDetail(item)"
            v-if="item.businessType === 4"
            >查看</c-button
          >
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { getsystemmsg } from "@/api/message";
import { checkLineOrderDetail } from "@/util/common";

export default {
  data() {
    return {
      msgList: [], // 订单消息列表
      loading: true,
      loadingMore: false,
      pageNum: 1,
      total: undefined
    };
  },
  computed: {
    showLoadingMore() {
      return this.msgList.length !== this.total && this.msgList.length !== 0;
    },
    setIcon() {
      return type => {
        let icon;
        switch (type) {
          case 1:
            icon = "jifen";
            break;
          case 2:
            icon = "xitongxiaoxi";
            break;
          default:
            icon = "xitongxiaoxi";
            break;
        }
        return icon;
      };
    }
  },
  methods: {
    // 查看线路订单详情
    checkOrderDetail(data) {
      checkLineOrderDetail(data);
    },
    // 刷新消息
    reload() {
      this.loading = true;
      this.pageNum = 1;
      this.getSystemMsgList("reload");
    },
    getSystemMsgList(type) {
      getsystemmsg({
        pageNum: this.pageNum,
        pageSize: 10
      })
        .then(res => {
          if (res) {
            if (type === "reload") this.msgList = []; // 刷新消息需要先清空消息列表
            this.msgList = res.pageData
              ? this.msgList.concat(res.pageData)
              : [];
            this.total = res.total;
          }
        })
        .finally(() => {
          if (this.loading) {
            this.loading = false;
            this.$emit("reloadFinish", "system");
          } else {
            this.loadingMore = false;
          }
        });
    },
    //   加载更多
    onLoadMore() {
      this.loadingMore = true;
      this.pageNum++;
      this.getSystemMsgList();
    }
  },
  created() {
    this.getSystemMsgList();
  }
};
</script>

<style lang="scss" scoped>
// .avatar.xitongxiaoxi {
//   background-color: rgb(51, 145, 229);
// }
// .avatar.jifen {
//   background-color: var(--warning);
// }
</style>
